<template name="service">
	<view>
		<view class="main-box">
			<dev-navbar weight="700" title="送TA健康服务体验卡" mode="center" color="" iconColor="" :isBack="true" bgColor=""></dev-navbar>
			<view class="jkfw">
				<view></view>
				<view class="jkfw-image">

				</view>
			</view>
			<view class="khzxfw">
				<block v-for="(item,index) in listFw" :key="index">
					<view class="scrollView" @tap="fwZClick(item.page)">
						<view class="fw-text">
							{{item.name}}
						</view>
						<template v-if="item.content.length>0">
							<view class="fw-dg">
								<view class="fw-dg-c" v-for="(ite,indexs) in item.content" :key="indexs"
									@tap="detailClick(ite.pageChild)">
									<view class="fw-dg-c-1"
										:style="{'background':`url(${ite.picChild})`,'background-size': '100% 100%'}">

									</view>
									<view class="fw-dg-c-2">
										{{ite.nameChild}}
									</view>
								</view>
							</view>
						</template>
						<template v-else>
							<view class="fw-img"
								:style='"background:url("+item.pic+") no-repeat;width:274rpx;height:296rpx;background-size: 100% 100%;margin:28rpx 20rpx 0 28rpx;border-radius:14rpx;"'>
							</view>
						</template>
					</view>
				</block>
				<view class="bottom-box">
					<view class="bottom-text">
						成功赠卡，好友即享会员体验特权
					</view>
					<button class="bottom-button" open-type="share">
						<view class="bottom-button-text1">
							去赠卡
						</view>
						<view class="bottom-button-text2">
							仅限新用户可领取
						</view>
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listFw: [{
						name: '用户特权',
						content: [{
								nameChild: '疾病自查',
								picChild: 'https://static.bsyjk.cn/fuwu/9180A73185B34E4BB678A1E3F8D0C8AA.png',
								pageChild: '/pages/subpackage/find/inquire/inquire'
							},
							{
								nameChild: '精品菜谱',
								picChild: 'https://static.bsyjk.cn/fuwu/F9CE14A67CA84AB7B2107F47D19CCCCC.png',
								pageChild: '/pages/subpackage/find/foodImage/foodImage'
							},
							{
								nameChild: '知识课堂',
								picChild: 'https://static.bsyjk.cn/fuwu/1BD36307D62041E09DEED095334EDC39.png',
								pageChild: '/pages/subpackage/find/classList/classList'
							},
							{
								nameChild: '家人互联',
								picChild: 'https://static.bsyjk.cn/fuwu/FC3B0D4330814BD1B4E4CA556A5B5DD3.png',
								pageChild: '/pagesHome/family-connectivity/family-internet-list'
							},
						],
						pic: '',
						page: ''
					},
					{
						name: '慢病评估专题',
						content: [],
						pic: 'https://static.bsyjk.cn/fuwu/81D9DB60307B40108E8EF78E18618469.png',
						page: '/pagesHome/health-assessment/health-assessment'
					},
					{
						name: '健康报告解读',
						content: [],
						pic: 'https://static.bsyjk.cn/fw/00CAA7CA6ED1414797EF7D7EA6C4AA8E.png',
						page: '/pages/subpackage/home/HealthReport/HealthReport'

					},
					{
						name: '健康数据检测预警',
						content: [],
						pic: 'https://static.bsyjk.cn/fuwu/CCD72E0185C44AEFB5F4FB25527AE4D9.png',
						page: '/pages/tab/home'
					},
					{
						name: '定制健康计划',
						content: [],
						pic: 'https://static.bsyjk.cn/fuwu/3AE6E4DDD94044179EAE6E41FEC069A9.png',
						page: '/pagesHome/health-assessment/health-plan'
					},
					{
						name: '健康顾问私人服务',
						content: [],
						pic: 'https://static.bsyjk.cn/fuwu/72201AE750AF4C34B5291E9D2C7DDD1A.png',
						page: '/pagesMy/my/counselor/counselor'
					},
					{
						name: '档案创建及分析',
						content: [],
						pic: 'https://static.bsyjk.cn/fuwu/60DC2BE29B1746EEA03C50550E0D683D.png',
						page: '/pagesMy/health-records/health-records'
					},
				],
			}
		},
		onLoad() {
			// 配置分享
			wx.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ["shareAppMessage", "shareTimeline"]
			});
		},
		methods: {
			//发送给朋友
			onShareAppMessage(res) {
				return {
					title: '送TA健康服务体验卡',
					type: 0,
					path: 'pages/tab/home',
					// summary: "为了让你更健康，我想邀请你关联家人健康，让我每天为你守护",
					// imageUrl: "https://58d.oss-cn-hangzhou.aliyuncs.com/goods/ttg_1596073788000.png"
				}
			},
			detailClick(url) {
				console.log(url, '--name-------------')
				this.$urouter.navigateTo({
					url: url,
					params: {}
				});

			},
			fwZClick(url) {
				if (url.indexOf("tab") != -1) {
					uni.switchTab({
						url: url
					});
				} else {
					this.$urouter.navigateTo({
						url: url,
						params: {}
					});
				}
			},
		}
	}
</script>
<style lang="scss">
	body{
		background-color: #fff;
	}
	.main-box {
		width: 750rpx;
		height: 748rpx;
		// min-height: 100vh;
		background: linear-gradient(185.14deg, #FBF1E5 31.73%, #FBF2E3 56.08%, rgba(251, 242, 227, 0) 100.68%);
		background-size: 750rpx 748rpx;

		.jkfw {
			position: absolute;
			top: 0;
			right: 0;
			display: flex;
			justify-content: space-between;

			.jkfw-image {
				width: 522rpx;
				height: 460rpx;
				background: url(https://static.bsyjk.cn/fuwu/F46ABB288F1D4374ADF08F7E7D6A20C7.png) no-repeat;
				background-size: 100% 100%;
				opacity: 0.35;
			}
		}

		.khzxfw {
			width: 750rpx;
			position: relative;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 34rpx;

			.scrollView {
				width: 328rpx;
				height: 422rpx;
				background: linear-gradient(180deg, #F7E4CA 0%, #FFF9F5 100%);
				border-radius: 20rpx;
				margin-top: 10rpx;
				margin: 10rpx 0;
				overflow: hidden;

				.fw-text {
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 600;
					font-size: 28rpx;
					line-height: 126.2%;
					letter-spacing: 0.4rpx;
					padding-top: 26rpx;
					padding-left: 22rpx;
				}

				.fw-img {
					// display: flex;
					// justify-content: center;
					// align-items: center;
				}

				.fw-dg {
					display: flex;
					flex-wrap: wrap;
					padding-top: 18rpx;
					justify-content: center;
					align-items: center;

					.fw-dg-c {
						width: 138rpx;
						height: 154rpx;
						background: #FFFFFF;
						border-radius: 14rpx;
						margin: 4rpx 6rpx;
						text-align: center;
						display: inline-block;

						.fw-dg-c-1 {
							width: 72rpx;
							height: 72rpx;
							margin-left: 34rpx;
							margin-top: 20rpx;
						}

						.fw-dg-c-2 {
							font-family: 'PingFang SC';
							font-style: normal;
							font-weight: 600;
							font-size: 18rpx;
							line-height: 126.2%;
							letter-spacing: 0.4rpx;
							color: #372E25;
							margin-top: 14rpx;
						}
					}
				}
			}

			.bottom-box {
				width: 750rpx;
				text-align: center;
				margin-top: 66rpx;
				// margin-left: 44rpx;
				// padding: 0 44rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-items: center;
				justify-content: center;

				.bottom-text {
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 700;
					font-size: 28rpx;
					line-height: 39rpx;
					text-align: center;
					letter-spacing: 0.58rpx;
					color: #000000;
				}

				.bottom-button {
					width: 655rpx;
					height: 90rpx;
					background: #FCE3BA;
					border-radius: 55rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin: 30rpx 0;

					.bottom-button-text1 {
						font-family: 'PingFang SC';
						font-style: normal;
						font-weight: 600;
						font-size: 34rpx;
						line-height: 126.2%;
						text-align: center;
						letter-spacing: 0.4rpx;
						color: #634419;
					}

					.bottom-button-text2 {
						font-family: 'PingFang SC';
						font-style: normal;
						font-weight: 400;
						font-size: 22rpx;
						line-height: 126.2%;
						text-align: center;
						letter-spacing: 0.4rpx;
						color: #634419;
					}
				}

			}
		}

	}
</style>
